﻿<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>景区介绍</title>
    <meta name="description" content="A simple grid layout with an initial fullscreen intro" />
    <meta name="keywords" content="fullscreen image, grid layout, flexbox grid, transition" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/layout-simple.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container" class="container">
        <section></section>
        <section></section>
        <header class="intro">
            <img class="intro__image" src="images/导览背景.png" alt="喀纳斯" />
            <div class="intro__round"></div>
            <button class='trigger'>
                <img src="images/btn01_arrow.png" />
            </button>
        </header>
        <div class="intro__content">
            <div class="intro__subtitle">
                <div class="intro__description">
                    <p class="index-info"><span style="font-size: 16px; font-weight: bold;">喀纳斯</span>，一个美丽富饶、神秘莫测的地方，在这里壮观的冰川映衬着宁静的湖水、茫茫的草原包容着幽深的原始森林。神秘的湖怪、古朴的土瓦人、变换的湖水、眩人的风景会让人痴迷。生活在都市的你，可以适时的停下脚步，背上背包，在这片净土上和自己的心来一次徒步之旅。<!-- <a href="http://instagram.com/danrubin/">Dan Rubin</a>.--></p>
                    <div class="demos">
                    </div>
                </div>
            </div>
        </div>
        <section class="items-wrap">
            <a href="Guide/wolongwan.html" class="item">
                <div class="item_content">
                    <div class="annular">
                        <img class="item__image" src="images/scenic1.png" alt="卧龙湾" />
                    </div>
                    <h2 class="item__title">卧龙湾</h2>
                    <em></em>
                </div>
            </a>
            <a href="Guide/yueliangwan.html" class="item">
                <div class="item_content">
                    <div class="annular">
                        <img class="item__image" src="images/scenic2.png" alt="月亮湾" />
                    </div>
                    <h2 class="item__title">月亮湾</h2>
                    <em></em>
                </div>
            </a>
            <a href="Guide/shenxianwan.html" class="item">
                <div class="item_content">
                    <div class="annular">
                        <img class="item__image" src="images/scenic3.png" alt="神仙湾" />
                    </div>
                    <h2 class="item__title">神仙湾</h2>
                    <em></em>
                </div>
            </a>
            <a href="Guide/guanyutai.html" class="item">
                <div class="item_content">
                    <div class="annular">
                        <img class="item__image" src="images/scenic4.png" alt="观鱼台" />
                    </div>
                    <h2 class="item__title">观鱼台</h2>
                    <em></em>
                </div>
            </a>
        </section>
    </div>
    <script src="js/classie.js"></script>
    <script type="text/javascript" src="js/page_scroll_bx.js?v=1.3"></script>
    <script>
        (function () {
            var container = document.getElementById('container'),
                trigger = container.querySelector('button.trigger');

            function toggleContent() {
                if (classie.has(container, 'container--open')) {
                    classie.remove(container, 'container--open');
                    classie.remove(trigger, 'trigger--active');
                    window.addEventListener('scroll', noscroll);
                }
                else {
                    classie.add(container, 'container--open');
                    classie.add(trigger, 'trigger--active');
                    window.removeEventListener('scroll', noscroll);
                }
            }

            function noscroll() {
                window.scrollTo(0, 0);
            }


            // reset scrolling position
            document.body.scrollTop = document.documentElement.scrollTop = 0;

            // disable scrolling
            window.addEventListener('scroll', noscroll);

            trigger.addEventListener('click', toggleContent);

            // For Demo purposes only (prevent jump on click)
            //[].slice.call(document.querySelectorAll('.items-wrap a')).forEach(function (el) { el.onclick = function () { return false; } });
        })();
    </script>
</body>
</html>
